<template>
  <div>
    <div class="product_info">
      <el-row>
        <el-col :span="4" :offset="4">
          <div>
            <img :src="productInfo.productLogoImg">
          </div>
        </el-col>
        <el-col :span="10" :offset="2">
          <div class="product_name">
            {{productInfo.productName}}
            <span class="comment_num">
              <el-badge :value="commentInfo.length" class="item">
                <el-button size="small">评论</el-button>
              </el-badge>
            </span>
          </div>
        </el-col>
      </el-row>
      <div class="comment_conntent_list">
        <el-row>
          <el-col :span="16" :offset="3">
            <div class="block">
              <el-timeline>
                <div v-for="(item,index) in commentInfo" :key="index">
                  <el-timeline-item :timestamp="item.createTime" placement="top">
                    <el-card :body-style="{ padding: '20px' }">
                      <el-row>
                        <el-col :span="1">
                          <div class="user_img">
                            <img src="">
                          </div>
                        </el-col>
                        <el-col :span="3">
                          <div class="user_name"><span class="user_name">{{item.userName}}</span></div>
                        </el-col>
                        <el-col :span="6">
                          <div class="user_rate">
                            <el-rate
                                    v-model="item.likeLevel"
                                    show-text
                                    disabled>
                            </el-rate>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col>
                          <div class="comment_conntent">
                            {{item.commentMessage}}
                          </div>
                          <div class="like_count" @click="btnLike(index)" v-bind:class="{height_light:isClick[index]}">
                            <i class="el-icon-thumb"> {{item.likeCount}}</i>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="15">
                          <div style="margin-top: 25px;">
                            <el-input placeholder="回复楼主" v-model="replyMessage[index]" @change="comitComment(index, item)">
                              <template slot="append">回复</template>
                            </el-input>
                          </div>
                        </el-col>
                      </el-row>
                      <div class="replyMessage">
                        <el-row>
                          <el-col>
                            <div v-for="(replyItem, index) in item.replyList">
                              <span class="replyName">{{replyItem.username}}  回复  {{replyItem.replyUserName}}：</span>
                              <span class="replayMessage">{{replyItem.commentMessage}}</span>
                              <span class="replyClick" @click="commitReply(index, replyItem)"><el-button type="warning" size="mini">评论</el-button></span>
                              <div class="replyMessage" v-if="replyItem.replyList != null && replyItem.replyList.length > 0">
                                <div v-for="(subReplyItem, index) in replyItem.replyList">
                                  <span class="replyName">{{subReplyItem.username}}  回复  {{subReplyItem.replyUserName}}：</span>
                                  <span class="replayMessage">{{subReplyItem.commentMessage}}</span>
                                  <span class="replyClick" @click="commitReply(index, subReplyItem)"><el-button type="warning" size="mini">评论</el-button></span>
                                </div>
                              </div>
                            </div>
                          </el-col>
                        </el-row>
                      </div>

                    </el-card>
                  </el-timeline-item>
                </div>

              </el-timeline>
            </div>
          </el-col>
        </el-row>
      </div>


    </div>

  </div>
</template>

<script>
  import {request} from "network/request";

  export default {
    name: "Comment",

    created() {

      request({
        url: '/product/' + this.$route.query.productId,
      }).then(res => {
        this.productInfo = res.data.data;
        console.log(this.productInfo);
      });

      request({
        url: '/comment/' + this.$route.query.productId,
      }).then(res => {
        this.commentInfo = res.data.data;
        this.commentCount = this.commentInfo.length;
      });
    },

    data(){
      return{
        productInfo: {},
        commentInfo: [],
        isClick: [],
        replyMessage: [],
        subReplyMessage: "",
        commentCount: 0,
      }

    },

    methods:{
      btnLike(index){
        console.log("111111111");
        this.isClick[index] = !this.isClick[index];
      },

      //提交回复下的回复
      commitReply(index, replyItem){
        console.log(replyItem);
        if(this.$store.state.userId === "" || this.$store.state.userId === null){
          this.$alert('请用户完成登录', '用户评论', {
            confirmButtonText: '确定',
          });
        }else{
          this.$prompt('请输入评论内容', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /[.\\n]*/,
            inputErrorMessage: '评论格式不正确'
          }).then(({ value }) => {
            request({
              url: '/comment',
              method: 'post',
              data: {
                userId: this.$store.state.userId,
                username: this.$store.state.username,
                commentMessage: value,
                likeCount: 0,
                productId: replyItem.productId,
                pid: replyItem.productCommentId,
                replyUserId: replyItem.userId,
              }
            }).then(res => {
              console.log(res);
              let reply = res.data.data;
              if(replyItem.replyList === null){
                replyItem.replyList = [];
              }else{
                replyItem.replyList.splice(replyItem.replyList.length - 1, 0, {
                  productCommentId: reply.productCommentId,
                  commentMessage: reply.commentMessage,
                  productId: reply.productId,
                  userId: reply.commentMessage.userId,
                  username: this.$store.state.username,
                  pid: reply.pid,
                  replyUserId: reply.replyUserId,
                  replyUserName: replyItem.username,
                  likeCount: reply.likeCount,
                  createTime: reply.createTime,
                })
              }
            });


            this.$message({
              type: 'success',
              message: '评论成功：'  + value
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消评论'
            });
          });
        }

      },

      //提交评论下的回复
      comitComment(index, item){
        if(this.$store.state.userId === "" || this.$store.state.userId === null){
          this.$alert('请用户完成登录', '用户评论', {
            confirmButtonText: '确定',

          });
        }else{
          request({
            url: '/comment',
            method: 'post',
            data: {
              userId: this.$store.state.userId,
              username: this.$store.state.username,
              commentMessage: this.replyMessage[index],
              likeCount: 0,
              productId: item.productId,
              pid: item.productCommentId,
              replyUserId: item.userId,
            }
          }).then(res => {
            console.log(res);
            let reply = res.data.data;
            this.commitReply[index] = "";
            if(item.replyList === null){
              item.replyList = [];
            }else{
              item.replyList.splice(item.replyList.length - 1, 0, {
                productCommentId: reply.productCommentId,
                commentMessage: reply.commentMessage,
                userId: reply.commentMessage.userId,
                username: this.$store.state.username,
                productId: reply.productId,
                pid: reply.pid,
                replyUserId: reply.replyUserId,
                replyUserName: item.username,
                likeCount: reply.likeCount,
                createTime: reply.createTime,
                replyList: []
              })
            }
          });
        }

      }
    }
  }
</script>

<style scoped>
  .product_info{
    margin-top: 10px;
    height: 90px;
    /*line-height: 90px;*/
  }
  .product_name{
    margin-top: 20px;
    font-size: 25px;
  }
  .comment_num{
    line-height: 0;
    margin-left: 10px;
  }
  .user_img img{
    margin-top: 20px;
    width: 100%
  }
  .img{

  }
  .user_name{
    margin-left: 10px;
    margin-top: 30px;

  }
  .user_rate{
    margin-top: 25px;
  }


  .comment_conntent{
    margin-top: 20px;
  }

  .like_count{
    margin-top: 10px;
  }

  .height_light{
    color: #FF6700;
  }

  .replyName{
    margin-top: 30px;
    display: inline-block;
    margin-left: 30px;
    color: #616192;
  }
  .replayMessage{
    font-size: 13px;
    color: #B0B0B0;
  }
  .replyClick{
    margin-left: 20px;
    font-size: 13px;
    display: inline-block;
  }

  .comment_conntent_list{
    margin-top: 30px;
  }
</style>
